<template>
  <div class="fill">
    <GobackNav />
    <div class="menu-list" 
    v-for="item of arr"
    @click="tiao(item.id)"
    :key="item.id"
    >
      <img :src="item.albums" alt />
      <div class="box">
        <p>{{item.title}}</p>
        <p>{{item.tags}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import GobackNav from "../components/nav/nav.vue";
export default {
  data(){
    return{
      arr:[]
    }
  },
  components: {
    GobackNav
  },
  mounted() {
     axios({
      url: "/json/losa.json",
    }).then(
       res=>res.data.reason ==="Success" && (this.arr = res.data.result.data)
      // res => console.log(res)
    )
  },
   methods: {
      tiao(id){
        this.$router.replace('/detail/'+id)
      }
  }
};
</script>

<style scoped>
 .menu {
  margin-top: 2.1875rem;
}

.menu-list {
  display: flex;
  align-items: center;
  margin-top: 2rem;
}

img {
  width: 5.25rem;
  height: 5.25rem;
  margin-left: 0.9375rem;
  border-radius: 0.625rem;
}

p {
  margin-left: 0.625rem;
  text-overflow: ellipsis;
  margin-top: 0.625rem;
}
p:nth-child(1) {
  font-weight: bold;
  font-size: .875rem;
  color: gray;
} 
</style>